<div id="settingModal" class="modal fade fa-modal user-setting-modal" tabindex="-1" role="dialog" aria-labelledby="userCenterLabel" (click)="changeModal('hide')">
  <div class="modal-dialog" role="document">
    <div class="modal-content" (click)="$event.stopPropagation()">
      <div class="modal-body">
        <div class="module">
          <h4 class="modal-title">基本信息</h4>
          <ul class="detail-list">
            <li>
              <div class="line-item">
                <span class="item-label">头像</span>：
              </div>
              <div class="line-item  item-middle">
                <img class="avatar" *ngIf="user.avatar" [src]="user.avatar" alt="sm-avatar">
                <img src="" alt="" class="avatar empty" *ngIf="!user.avatar">
              </div>
              <div class="line-item item-right ">
                <span class="modify color-white" (click)="updateAvatar(); showUploadModal=true;">修改</span>
              </div>
              <div #uploadImgModal id="uploadImgModal" class="modal fade" role="dialog">
                <img-upload *ngIf="showUploadModal" (onConfirmed)="modifyImage($event)" [title]="imageTitle"></img-upload>
              </div>
            </li>
            <li>
              <div class="line-item">
                <span class="item-label">帐号</span>：
              </div>
              <div class="line-item item-middle">
                {{ user.username}}
                <!-- <span *ngIf="!computeData.isVerified" class="modify sm color-orange">未绑定</span> -->
                <span class="modify sm color-orange">未绑定</span>
              </div>
              <div class="line-item item-right">
                <span class="modify color-white" (click)="bindUser()">绑定</span>
              </div>
            </li>
            <li>
              <div class="line-item">
                <span class="item-label">昵称</span>：</div>
              <div class="line-item item-middle">
                <div *ngIf="editKey!='nick'" [innerHTML]="user.nick"></div>
                <input id="nickInput" name="nickInput" type="text" class="cm-action" *ngIf="editKey=='nick'" [(ngModel)]="user.nick">
              </div>
              <div class="line-item item-right">
                <span class="modify color-white" *ngIf="editKey!='nick'" (click)="editKey='nick'" input-trigger data-target="#nickInput" required>修改</span>
                <div class="btn-container" *ngIf="editKey=='nick'">
                  <button class="save color-red" (click)="modify('nick')" disabled="infoForm.nickInput.$invalid">保存</button>
                  <button class="cancel color-white-gray" (click)="editKey=''">取消</button>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="module">
          <h4 class="modal-title">账户安全</h4>
          <ul class="detail-list">
            <li>
              <div class="line-item">
                <span class="item-label">密码</span>：</div>
              <!-- <div class="line-item item-middle">{{ computeData.isVerified ? '**********': '未设置'}}</div> -->
              <div class="line-item item-right">
                <!-- <span class="modify color-white" *ngIf="computeData.isVerified" (click)="modifyPassword()">修改</span></div> -->
                <span class="modify color-white" (click)="modifyPassword()">修改</span></div>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div class="modal-footer"></div> -->
    </div>
  </div>
  <!-- <update-avatar user-info="user" on-confirm="modifyAvatar(url)"></update-avatar> -->
  <!-- <bind-user user-info="user" on-confirm="updateUsername(username)"></bind-user> -->
  <!-- <update-pwd user-info="user"></update-pwd> -->
</div>
